<template>
	<view class="container">
    <view>
		<nonPopup :isShow="isShow" :dataArr="nonConformance" @close="isShow = false" @confirm="isShow = false" />
	</view>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
	<template #top>
		<u-calendar 
		   :show="showDate" 
		    mode="single" 
			rowHeight="90"
			 :minDate="minDate"
			 monthNum="20"
			 :maxDate="maxDate"
			@close="showDate = false" 
		   closeOnClickOverlay @confirm="confirm"></u-calendar>
		<u-button @click="showDate = true">{{ params.start_time || '选择日期' }}</u-button>
		<view class="container-head">
			<u-search placeholder="请输入负责人姓名" v-model.lazy="params.head_name" height="70" @search="searchStore" 
			@custom="searchStore">
			</u-search>
		</view>
	</template>
	<view class="box-card">
		<view class="box-card-item" v-for="(item, index) of dataList" :key="index" @click="jumt(item)"
		 :class="{lineBgRed: item.status === 1, lineGreen: item.status === 2}">
			<view class="box-card-item-left">
				<view class="box-card-item-left-title">{{ item.device_name || '-' }} </view>
				<view class="box-card-item-left-text">门店负责人: {{ item.head_name || '-' }} </view>
				<view class="box-card-item-left-text">
					门店电话: {{ item.phone || '-' }}
				</view>
				<view class="box-card-item-left-text">
					门店地址: {{ item.address  || '-' }}
				</view>
				<view class="box-card-item-left-text">
					设备组: {{ item.device_id || '-' }}
				</view>
				<view class="box-card-item-left-text">
					销售经理: {{ item.sales_manager || '-' }}
				</view>
				<view class="box-card-item-left-text">
					区域代表: {{ item.company || '-' }}
				</view>
				<view class="box-card-item-left-text">
					开机次数: {{ item.boot_count || 0 }}
				</view>
				<view class="box-card-item-left-text">
					是否完成: {{ item.status  === 1  ? '否' : '是' }}
				</view>
			</view>
			<view class="box-card-item-right"  :class="{red: item.status === 1, black: item.status === 2}">
				{{ item.status === 1 ?'未达标' : '已达标' }}
			</view>
		</view>
	</view>
	</z-paging>
	</view>
</template>

<script>
  import request from "@/api/request.js"
  import dayJS from 'dayjs'
  import  nonPopup from "./nonPopup.vue"
  export default {
	components: {
	  nonPopup	
	},
	  data(){
	  return {
		dataList: [],
		showDate: false,
		isShow: false,
		minDate:'',
		maxDate: '',
		nonConformance: [],
		params: {
		  page: 1,
		  page_size: 10,
		  start_time: dayJS().format('YYYY-MM-DD'),
		  token: '',
		  head_name: ''
		}
	  }
	},
	onLoad() {
		 this.params.token = uni.getStorageSync('token');
	 this.maxDate = dayJS().format('YYYY-MM-DD')
	 this.minDate = dayJS().add(-18, 'month').format('YYYY-MM')
	 	 this.getStoreStartupRecord()
	},
	methods: {
	   confirm(val){
		  this.showDate = false
		  this.params.start_time = val.toString()
		  this.$refs.paging.reload()
		},
		searchStore(){
		  this.$refs.paging.reload()
		},
	  getStoreStartupRecord(){
		request({
		  url: '/kx/StoreManagement/earlyWarn',
		  method: 'POST',
		  data: {
			  token: this.params.token
		  },
		  successCb: (res) => {
			uni.hideLoading()
			if(res.data.data.length >= 3){
			 	this.nonConformance = res.data.data.splice(0, 3)	
			} else {
				this.nonConformance = res.data.data
			}
			if(this.nonConformance.length > 0){
			  this.isShow = true  
			} else {
			 this.isShow = false
			}
		  },
		  failCb: () => {
			uni.hideLoading()
		  }
		})   
	  },
	  jumt(item){
		uni.navigateTo({
			url: `/pagesA/record/index?device=${item.device_id}`
		})
	  },
	  queryList(page, page_size){
		this.params.page = page
		this.page_size = page_size
		const that = this
		uni.showLoading({
			title: '加载中...'
		})
		request({
		  url: '/kx/StoreManagement/getDeviceList',
		  method: 'POST',
		  data: {
			  ...that.params
		  },
		  successCb: (res) => {
			uni.hideLoading()
			that.$refs.paging.complete(res.data.data);
		  },
		  failCb: () => {
			uni.hideLoading()
			that.$refs.paging.complete(false);  
		  }
		})  
	  }	
	}
  }
</script>

<style lang="scss" scoped>
	.comm-img {
	 width: 28rpx;
	 height: 22rpx;
	 object-fit: cover;	
	}
	.comm-text {
	  font-size: 24rpx;
	  color: #6D6D6D;
	  margin: 0 10rpx;  
	}
	.comm-count {
	  font-weight: 700;
	  font-size: 36rpx;
	  color: #3D3D3D;	
	}
	.red {
	 color: #E12626;	
	}
	.black {
	  color: #3D3D3D;
	}
	.lineBgRed {
	 background: linear-gradient( 270deg, #FF8732 0%, rgba(252,153,32,0.76) 100%);	
	}
	.lineGreen{
		background: #52B000;
	}
.container{
  background: #F3F3F3;
  width: 100%;
  min-height: 98vh;
  padding-top: 2rpx;
    &-head {
		width: 100%;
		padding: 20rpx 0 20rpx 0;
		background: #ffffff;
	}
	.box-card {
		margin: 24rpx 0;
		&-item {
		@include layout(stretch, stretch);
		 width: 680rpx;
		 // height: 120rpx;
		 margin: 12rpx auto;
		 padding: 20rpx 0;
		 border-radius: 20rpx;
		 color: #fff;
		 &-left {
			 flex: 1;
			 &-title {
			padding: 0 24rpx;
			line-height: 1.5;
			font-weight: 700;
			font-size: 24rpx;
			 }
			 &-text {
				margin-left: 20rpx;
				font-size: 24rpx;
				line-height: 1.5;
			 }
			 &-addr {
			   @include layout(stretch, center);
			   padding: 20rpx;
			   image {
			    width: 24rpx;
			    height: 26rpx;
			    object-fit: cover;
				margin-right: 12rpx;
				flex-shrink: 0;
			   } 
			   view {
				font-size: 24rpx;
				line-height: 1.5;
			   }
			 }
		 }
		 &-right {
		   margin-right: 24rpx;
		   width: 90rpx;
		   height: 34rpx;
		   background: #FFFFFF;
		   border-radius: 20rpx;
		   font-size:  20rpx;
		   text-align: center;
		   line-height: 34rpx;
	  }
		}
	}
	}
</style>